<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        用户信息:{{user.id}}-{{user.name}} <br>
        <button @click="addAge">增加年龄</button>
        <h1>年龄:{{user.age}}</h1>
        <h3>{{user.xx.y}}</h3>

        <!-- data的对象中没有num不报错 -->
        <h1>num:{{user.xx.num}}</h1>

        <!-- data中没有num报错 -->
        <h1>num:{{num}}</h1>
    </div>
    <script src="plugins/vue2.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                user:{
                    id:1001,
                    name:'success',
                    xx:{
                       id:100
                    }
                }
            },
            methods:{
                addAge(){
                    //控制台虽然通过vm.user.age可以看到,但是没有被vm检测到
                    //this.user.age=18

                    //只能给data的对象的属性继续增加属性
                    // Vue.set(this.user,'age',18) //ok

                    Vue.set(this.user.xx,'y',18) //ok

                    //但是不能够给data直接增加新的属性
                    //Vue.set(this.data,'num',100)
                }
            }
        });
    </script>
</body>
</html>